<template>
	<div class="main-container">
    <div :style="{'width': isCollapse === true ? '64px' : '200px'}" class="main-aside">
      <el-menu
        :collapse="isCollapse"
        background-color="#304156"
        text-color="#fff"
        @select="handlerSelect"
      >
        <el-menu-item index="/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu v-for="item in menuList" :index="item.path" :key="item.path">
          <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
          </template>

          <el-menu-item-group>
            <el-menu-item
              v-for="child in item.children"
              :index="child.path"
              :key="child.path"
            >
              {{child.mate.title}}
            </el-menu-item>
          </el-menu-item-group>

        </el-submenu>
      </el-menu>
    </div>
    <div class="main-content">
      <div class="content-header">
        <div class="navbar">
          <el-button
            @click="isCollapse = !isCollapse"
            :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
            type="text"
            style="font-size: 30px;"
          >
          </el-button>

          <el-dropdown>
            <!-- <el-button size="mini" type="primary">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button> -->
            <img style="width: 40px;height: 40px;" src="http://192.168.200.251:8888/wx/storage/fetch/ja6ilsj2diy4guvw3ota.gif?imageView2/1/w/80/h/80" alt="">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>首页</el-dropdown-item>
              <el-dropdown-item @click.native="setPassword($event)">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="tags-view-container">
          <el-tag
            v-for="(item, index) in testList"
            :key="index"
            @click="toPage(item)"
            size="small"
            closable
            @close="deleteTag(index)"
            style="margin-left: 10px;">
            {{item.title}}
          </el-tag>
        </div>

      </div>
      <div class="content-view">
        <router-view></router-view>
      </div>
    </div>
	</div>
</template>

<script>
import axios from 'axios'
import routerList from '../router/index.js'

	export default {
    name: '/main',
    computed: {
      menuList () {
        // 用户管理路由
        let userManageList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('userManage')
        })

        // 商城管理路由
        let shoppingMallManageList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('shoppingMallManage')
        })

        // 商品管理路由
        let shoppingManageList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('shoppingManage')
        })

        // 推广管理路由
        let marketingManagementList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('marketingManagement')
        })

        // 系统管理路由
        let sysManageList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('sysManage')
        })

        // 配置管理路由
        let configManageList = routerList.options.routes[1].children.filter(item => {
          return item.path.includes('configManage')
        })

        return [
          {
            path: '/userManage',
            name: '用户管理',
            icon: 'el-icon-menu',
            children: userManageList
          },
          {
            path: '/shoppingMallManage',
            name: '商城管理',
            icon: 'el-icon-menu',
            children: shoppingMallManageList
          },
          {
            path: '/shoppingManage',
            name: '商品管理',
            icon: 'el-icon-menu',
            children: shoppingManageList
          },
          {
            path: '/marketingManagement',
            name: '推广管理',
            icon: 'el-icon-menu',
            children: marketingManagementList
          },
          {
            path: '/sysManage',
            name: '系统管理',
            icon: 'el-icon-menu',
            children: sysManageList
          },
          {
            path: '/configManage',
            name: '配置管理',
            icon: 'el-icon-menu',
            children: configManageList
          }
        ]
      }
    },
		data () {
			return {
        isCollapse: false,
        routeTagList: [],
        testList: []
			}
		},
    mounted () {
      this.testList = JSON.parse(sessionStorage.getItem('routeList'))
      this.routeTagList = JSON.parse(sessionStorage.getItem('routeList'))|| []
    },
    watch: {
      $route: {
        handler (newValue) {
          let allRoute = routerList.options.routes[1].children

          let index = allRoute.findIndex(item => {
            return newValue.path === item.path
          })

          // 如果当前跳转的路由已经存在this.routeTagList中,那么就不push
          let tagIndex = this.routeTagList.findIndex(item => {
            return newValue.path === item.path
          })

          if (tagIndex >= 0) {
            return
          }

          this.routeTagList.push({
            path: newValue.path,
            title: allRoute[index].mate.title
          })

          sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))

          this.testList = JSON.parse(sessionStorage.getItem('routeList'))
        }
      }
    },
		methods: {
      setPassword (event) {
        this.$router.push({path: '/editPassword'})
      },
      exit () {
        sessionStorage.removeItem('shopping-admin-token')

        this.$router.replace({
            path: '/login'
        })
      },
      handlerSelect (item) {
        if (this.$route.path === item) {
          return
        }

        this.$router.push({
          path: item
        })
      },
      deleteTag (index) {
        this.routeTagList.splice(index, 1)
        sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))
       this.testList = JSON.parse(sessionStorage.getItem('routeList'))
      },
      toPage (item) {
        this.$router.push({
          path: item.path
        })
      }

		}
	}
</script>

<style scoped lang="scss">
.main-container {
    display: flex;
    height: 100%;

    .main-aside {
        width: 200px;
        background-color: rgb(48, 65, 86);
    }

    .main-content {
        flex: 1;

        .content-header {
            width: 100%;
            height: 84px;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 1px 2px #ddd;

            .navbar {
              display: flex;
              justify-content: space-between;
              height: 50px;
              align-items: center;
              padding: 0 20px;
            }

            .tags-view-container {
              display: flex;
              align-items: center;
              border-top: 1px solid #ddd;
              height: 34px;
            }
        }
    }

    .el-menu {
        border-right: solid 1px transparent;

        .el-submenu {
            .el-menu {

                .el-menu-item-group {
                    background: #1f2d3d;

                    ul {
                        li.el-menu-item {
                            
                            background-color: #1f2d3d !important;
                        }
                    }
                }
            }
        }
    }
}
</style>